<html>
<head>
    <meta charset="utf8" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <!--
    <script src="static/js/table_sort.js"></script>
    -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    body{
        padding:5px 5px 0 5px;
    }

    #loading {
      height : 2px;
      position : absolute;
      top : 0px;
      left : 0px;
      background-color : #03A9F4;
      margin : 0px;
      animation : loading 7s infinite;
      -webkit-animation : loading 7s infinite;
    }

    @-webkit-keyframes loading{
      0% {width : 0px;}
      100% {width : 100%;}
    }

    @keyframes loading {
      0% {width : 0px;}
      100% {width : 100%;}
    }

    .highlight{
        padding-left:9px;
        padding-right:9px;
        padding-top:15px;
        padding-bottom:13px;
        margin-bottom:10px;
        border: 1px solid #e1e1e8;
        border-radius: 4px;
    }
    table th{
        font-weight:bold;
        cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/ 
        font-size:14px;
    }
    table td{
        font-size:14px;
    }
    .col-md-8{
        width:63%;
    }
    .col-md-4{
        width:170px;
        color: #333333;
        font-weight: bold;
    }
    .checkbox{
        margin-left:10px;
        margin-top:0px;
    }
    .seach_rigth {
        float: right;
        margin-right: 12px;
    }
    .seach_rigth input,.seach_rigth select{
        width:150px;
        float:left;
        margin-right:3px;
    }
    textarea.form-control{
        background-color:#000;
        color:#fff;
    }
    .col-md-4 span{
        margin-right: 5px;
    }
    .col-md-4 label{
        margin-right: 5px;
        cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/
        font-weight: 200;
    }
    h3{
        margin-top:8px;
    }
    .row{
        margin-left:-3px;
    }
    .nav{
        margin-bottom:20px;
    }
    .loading{
        background-image: url('/static/images/loading.gif');
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: 45px;
        padding-right: 30px;
    }
    label{
        font-weight:100;
        margin-right:20px;
    }
    .alert-danger{
        margin-top: 5px;
    }
    </style>
</head>
<body>
<!--报警标题-->

<div id="loading" style="display: none"></div>



<div class="highlight">

    <div class="logs_" style="">

        <form class="form-inline">            
            <input class="form-control log_name" placeholder="文件目录" />
            <input class="form-control keyword" placeholder="关键字搜索" />
            <select class="form-control log_line">
                <option>50</option>
                <option>100</option>
                <option>150</option>
                <option>200</option>
                <option>250</option>
                <option>300</option>
                <option>350</option>
                <option>400</option>
                <option>450</option>
                <option>500</option>
                <option>550</option>
                <option>600</option>
                <option>650</option>
            </select>            
            <a href="javascript:onStartClick()" class="btn btn-default onStartClick" role="button">启动</a>
            <a href="javascript:onCloseClick()" class="btn btn-danger onCloseClick disabled" role="button">停止</a>
            <a href="javascript:void(0)" class="btn btn-default onClearClick" role="button">清屏</a>
            <!--<a href="javascript:void(0)" class="btn btn-default onDownClick" role="button"></a> -->
        </form>
        <!--
        <textarea class="form-control" rows="20" id="logs_info"></textarea>
        -->
         <div style="height:400px;overflow:auto;background-color:black;color:white;" id ="logs_info"></div>

    </div>



    </div>

</div>
<script>




    $(".onClearClick").click(function(){
        $("#logs_info").html("<p>清屏</p>")
    })
    //alert(window.location.hostname)
    URL=window.location.hostname
    
    var ws
    function onStartClick(){
        $(".onStartClick").addClass("disabled")
        $(".onStartClick").addClass("loading")
        $(".onCloseClick").removeClass("disabled")
        log_name=$(".log_name").val()
        log_line=$(".log_line").val()
        keyword=$(".keyword").val()
        $("#logs_info").html("加载中... ...")
        ws = new WebSocket('ws://192.168.235.181:11223/logs?log_name='+log_name+"&log_line="+log_line+"&keyword="+keyword);

        ws.onopen = function() {
          //output("onopen");
            ws.send('start');
            
        };
        
        ws.onmessage = function(evt) {

            if($("#logs_info p").length > 1000 ){
                $("#logs_info p:lt(10)").remove()
            }
            $("#logs_info").append("<p>"+evt.data+"</p>");
            var scrollTop = $("#logs_info")[0].scrollHeight;  
            $("#logs_info").scrollTop(scrollTop);

        };
        
        ws.onclose = function() {
          //output("onclose");
            console.log("aa")
        };
        ws.onerror = function(e) {
          //output("onerror");
          console.log(e)
        };

    }

    function onCloseClick() {
        $(".onCloseClick").addClass("disabled")
        $(".onStartClick").removeClass("disabled")
        $(".onStartClick").removeClass("loading")
        ws.close();
    }


</script>
</body>
</html>
